<template>
<div id="main">
<tabbar>
<tabbaritem path="/home" activecolor="pink">
  <img slot="item-icon" src="@/assets/img/Tabbar/first.svg" >
  <img slot="item-icon-active" src="../../../assets/img/Tabbar/for.svg">
  <div slot="text">首页</div>
</tabbaritem>
<tabbaritem path="/cart" activecolor="pink">
  <img slot="item-icon" src="../../../assets/img/Tabbar/sec.svg" >
  <img slot="item-icon-active" src="../../../assets/img/Tabbar/five.svg">
  <div slot="text">查询</div>
</tabbaritem>
<tabbaritem  path="/catagory" activecolor="pink">
  <img slot="item-icon" src="../../../assets/img/Tabbar/thir.svg" >
  <img slot="item-icon-active" src="../../../assets/img/Tabbar/six.svg">
  <div slot="text">购物车</div>
</tabbaritem>
<tabbaritem  path="/profile" activecolor="pink">
  <img slot="item-icon" src="../../../assets/img/Tabbar/last.svg" >
  <img slot="item-icon-active" src="../../../assets/img/Tabbar/sev.svg">
  <div slot="text">我的</div>
</tabbaritem>


</tabbar>
</div>

</template>

<script>
import tabbar from "../../common/tab/tabbar.vue"
import tabbaritem from "../../common/tab/tabbaritem.vue"
export default {
  name:'maintabbar',
  components:{
    tabbar,
    tabbaritem
  }

}
</script>

<style scoped>
#main{
  height: 55px;
  width: 100%;
  background-color: #ddd;
  position: fixed;
  bottom: 0;
  margin-left: -7px;
  z-index: 11;
}


</style>
